<template>
	<view :style="[{paddingTop:CustomBar+'px'},{minHeight:scrollH+'px'}]" class="bg-gradual-colorP-bottom">
		<cu-custom bgColor="bg-colorP" :isBack="true" fatherCss="box-shadow: none;">
			<block slot="backText"></block>
			<block slot="content">订单详情</block>
		</cu-custom>
		<view class="view-content ">
			<!-- <view class="ticket_title">{{orderInfo.is_combin?'联票':'单品'}}</view> -->
			<view class="order-list" v-if="!orderInfo.is_combin">
				<view class="title" :data-id="orderInfo.business_id" :data-industryid="orderInfo.industry_id" @click='goShop'>
					<text>{{orderInfo.b_name}}</text>
					<image src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/trun-right.svg"></image>
				</view>
				<view class="goods-info">
					<view v-for="(item,index) in orderInfo.product_info" :key="index" class="product_item">
						<image :src="item.image"></image>
						<view>
							<text>{{item.product_name}}</text>
							<view class="new-price">
								<text class="text-colorP text-price" v-if="item.price">{{item.price}}</text>
								<text class="text-colorP" v-if="item.price && item.integral">+</text>
								<text class="text-colorP" v-if="item.integral">{{item.integral}}</text>
								<text class="text-colorP" v-if="item.integral">积分</text>
							</view>
						</view>
						<view class="lay">
							<text>{{item.totalAmount}}</text>
							<text>x {{item.saleNum}}</text>
						</view>
					</view>
				</view>
				<view class="zoom">
					<view class="lianxi">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-phone.png"></image>
						<text @click='telphone'>联系商家</text>
					</view>
					<text>共
						<text>{{saleNum}}</text> 件商品
						</text>
					<text>
						实付<text class="text-price text-colorP price">{{orderInfo.total_price}}</text>
					</text>
				</view>
			</view>
			
			<view class="order-list ticket-many" v-if="orderInfo.is_combin">
				<view class="title" :data-id="orderInfo.business_id" :data-industryid="orderInfo.industry_id"  @click='goShop'>
					<text>{{orderInfo.b_name}}</text>
					<image src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/trun-right.svg"></image>
				</view>
				<view class="ticket-many-info">
					<view class="left">
						<text>一</text>
						<text>票</text>
						<text>通</text>
					</view>
					<view class="swiper-container-cont">
						<scroll-view scroll-x scroll-with-animation="true">
							<view class="swiper-container">
								<view v-for="(item,index) in orderInfo.combin_shops" :key="index" :data-id="item.business_id" :data-industryid="orderInfo.industry_id"  @click='goShop'>
									<image :src="item.shop_image" />
									<text>{{item.business_name}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="ticket_many_price">
					<view class="heli"></view>
					<text>{{orderInfo.shopText}}</text>
					<text class="text-price text-colorP price">{{orderInfo.total_price}}</text>
					<text>x {{saleNum}}</text>
				</view>
				<view class="zoom many-zoom">
					<view class="lianxi">
						<image src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/contact-phone.png"></image>
						<text @click='telphone'>联系商家</text>
					</view>
				</view>
			</view>

			<view class="order-info">
				<view class="title">订单详情</view>
				<view>订单编号：{{orderInfo.order_sn}}</view>
				<view>付款时间：{{orderInfo.pay_time}}</view>
				<view v-if="orderInfo.mark">订单备注：{{orderInfo.mark}}</view>
				<image :class="[orderInfo.status == 3?'active':'','be-success']" src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/paySuccess.png" v-if="orderInfo.status == 3"></image>
			</view>

			<view class="cancel-after bg-colorP" v-if="orderInfo.status == 2">
				<view>
					<text>取货码：</text>
					<text>{{orderInfo.verification_code}}</text>
					<text class="bg-colorP" @click='copy'>复制核销码</text>
				</view>
				<view>请将核销码或核销二维码发予商户进行核销</view>
				<image :src="orderInfo.verification_code_link"></image>
				<view class="save_btn bg-colorP" @click='saveImage'>
					保存取货码
				</view>
			</view>
			
			<view class="shop-status" v-if="orderInfo.v_log.length>0">
				<view class="titaa">核销状态</view>
				<view class="status-item" v-for="(item,index) in orderInfo.v_log" :key="index">
					<view style="height: 110rpx;">
						<text>{{item.name}}</text>
						<text>核销时间： {{item.create_time}}</text>
					</view>
					<view>已核销</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				orderInfo: {},
				saleNum: '',
				orderId:'',
				scrollH:'',
				status: false
			}
		},
		onLoad(options) {
			this.orderId = options.id
			// 是否需要保存
			if(options.status=='needSave'){
				this.status = true
			}
			this.getDetailNew()
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
				}
			})
		},
		methods: {
			getDetailNew() {
				var that = this
				this.$request({
					url: '/OnlineOrder/getOrderDetail',
					data: {
						id: that.orderId
					},
					success: res => {
						if (res.data.status == 1) {
							var saleNum = 0
							var result = res.data.data
							if (result.product_info != '') {
								result.product_info = JSON.parse(result.product_info)
								result.product_info.forEach(item => {
									saleNum += item.saleNum;
								})
							}
							if (result.combin_shops && result.combin_shops != '') {
								var shopText = ''
								result.combin_shops = JSON.parse(result.combin_shops)
								result.combin_shops.forEach((item, index) => {
									shopText += item.business_name + (index == result.combin_shops.length - 1 ? '' : '+')
								})
								result['shopText'] = shopText
							}
							that.orderInfo = result
							that.saleNum = saleNum
							// 是否需要直接保存核销码
							if(that.status){
								that.saveImage()
							}
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			goShop(e) {
				var busId = e.currentTarget.dataset.id
				var industryId = e.currentTarget.dataset.industryid
				if (!industryId) return
				if (industryId == '6') {
					uni.navigateTo({
						url: '/pages/scenicDetail?busId=' + busId
					})
				} else {
					uni.navigateTo({
						url: '/pages/generalDetail?busId=' + busId
					})
				}
			},
			telphone: function() {
				uni.makePhoneCall({
					phoneNumber: this.orderInfo.b_phone
				})
			},
			// 复制核销码
			copy: function() {
				var that = this;
				if (!that.orderInfo.verification_code) return;
				var code = String(that.orderInfo.verification_code)
				uni.setClipboardData({
					data: code,
					success: function(res) {
						wx.getClipboardData({
							success: function(res) {
								wx.showToast({
									title: '复制核销码成功',
								})
							}
						})
					}
				})
			},
			// 保存核销码
			saveImage() {
				var that = this
				if (!that.orderInfo.verification_code_link) return;
				uni.downloadFile({
					url: that.orderInfo.verification_code_link,
					success: function(res) {
						//图片保存到本地
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(data) {
								uni.showModal({
									content:'保存成功,请到店时向商家出示核销码核销商品！',
									showCancel: false
								})
							},
							fail: function(err) {},
							complete(res) {
								console.log(res);
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.bootom-btn {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 24rpx;
		background: rgba(255,255,255,.5);
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: solid 1rpx #efefef;
	}
	
	.bootom-btn>view {
		height: 70rpx;
		padding: 0 24rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		border: solid 1rpx #efefef;
		text-align: center;
		line-height: 64rpx;
		margin-left: 20rpx;
		color: #666666;
		font-size: 30rpx;
	}
	
	.bootom-btn>view:last-child {
		border: solid 1rpx #f34930;
		color: #f34930;
	}
	.view-content {
		width: 100%;
		padding: 0 20rpx 130rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.ticket_title {
		width: 100%;
		box-sizing: border-box;
		font-size: 36rpx;
		line-height: 60rpx;
		color: #fefefe;
		font-weight: bold;
	}

	.order-list {
		margin-top: 20rpx;
		/* min-height: 500rpx; */
		background: #fff;
		display: flex;
		flex-direction: column;
		border-radius: 8rpx;
	}

	.order-list .title {
		line-height: 80rpx;
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: solid 1rpx rgba(242, 242, 242, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		display: flex;
		align-items: center;
		color: #333;
	}

	.order-list .title image {
		width: 40rpx;
		height: 50rpx;
		margin-left: 10rpx;
	}

	.goods-info {
		padding: 0 20rpx;
	}

	.product_item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: dashed 1rpx #f2f2f2;
		box-sizing: border-box;
	}

	.zoom {
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		border-bottom: dashed 1rpx #f2f2f2;
		border-radius: 0 0 8rpx 8rpx;
		position: relative;
		color: #333;
		
		font-size: 26rpx;
	}

	.many-zoom {
		padding: 30rpx 20rpx;
		border-top: solid 1rpx #f2f2f2;
	}

	.zoom .lianxi {
		position: absolute;
		top: 50%;
		left: 20rpx;
		display: flex;
		align-items: center;
		height: 50rpx;
		transform: translateY(-25rpx);
		font-size: 28rpx;
	}

	.zoom .lianxi image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.zoom .lianxi text {
		color: #333;
	}

	.zoom>view {
		font-size: 28rpx;
		color: #333;
	}

	.zoom>view text {
		color: rgba(255, 87, 51, 1);
	}

	.zoom>view:nth-child(1) {
		margin-right: 20rpx;
	}

	.zoom>view:nth-child(2) text text {
		font-size: 22rpx;
	}

	.product_item image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		background: #ccc;
	}

	.product_item>view:nth-child(2) {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.product_item>view:nth-child(2)>text:nth-child(1){
		color: #333;
		font-weight: bold;
		font-size: 28rpx;
		display: flex;
		max-width: 400rpx;
	}
	
	.product_item>view:nth-child(2) .new-price{
		display:flex;
		align-items: center;
	}
	
	.product_item>view:nth-child(2) .new-price text{
		font-size: 26rpx;
	}
	
	.product_item .lay{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		
	}
	
	.product_item .lay text{
		font-size: 26rpx;
		color: #999;
	}

	.remark {
		width: 100%;
		display: flex;
		background: #fff;
		/* min-height: 200rpx; */
		/* padding-bottom: 20rpx; */
		padding: 20rpx;
		box-sizing: border-box;
		align-items: center;
		border-radius: 0 0 8rpx 8rpx;
	}

	.remark>view {
		width: 100rpx;
		font-size: 30rpx;
		color: #333;
		text-align: center;
		line-height: 40rpx;
	}

	.remark>input {
		width: 100%;
		height: 100%;
		border-bottom: solid 1rpx #f2f2f2;
		border-radius: 8rpx;
		padding: 10rpx;
		box-sizing: border-box;
		line-height: 50rpx;
		font-size: 24rpx;
	}

	.go-pay {
		display: flex;
		height: 100rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #3d3d3d;
		/* display: flex; */
		align-items: center;
	}

	.go-pay>view:nth-child(1) {
		flex: 1;
		padding-left: 20rpx;
		color: #fff;
		font-size: 40rpx;
	}

	.go-pay>view:nth-child(1) text {
		font-size: 24rpx;
	}

	.go-pay>view:nth-child(2) {
		width: 200rpx;
		line-height: 100rpx;
		background: #00d761;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
	}

	.order-info {
		width: 100%;
		overflow: hidden;
		background: #fff;
		border-radius: 8rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
	}

	.be-success {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		width: 180rpx;
		height: 155rpx;
	}

	.order-info .title {
		line-height: 35rpx;
		width: 100%;
		padding-left: 10rpx;
		margin-bottom: 20rpx;
		border-left: solid 8rpx #f34930;
		color: #333;
		font-size: 28rpx;
	}

	.order-info :nth-child(2),
	.order-info :nth-child(3),
	.order-info :nth-child(4),
	.order-info :nth-child(5) {
		line-height: 40rpx;
		color: #999;
		font-size: 26rpx;
		margin: 10rpx 0;
	}

	.cancel-after {
		width: 100%;
		overflow: hidden;
		margin-top: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		border-radius: 8rpx;
		padding: 40rpx 0;
	}

	.cancel-after>view:nth-child(1) {
		display: flex;
		height: 80rpx;
		align-items: center;
	}

	.cancel-after>view:nth-child(1) text {
		height: 100%;
		display: flex;
		align-items: center;
		color: #333;
		font-size: 26rpx;
	}

	.cancel-after>view:nth-child(1) text:last-child {
		padding: 0 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		border-radius: 8rpx;
		/* background: #3080e8; */
		color: #fff;
		text-align: center;
		margin-left: 20rpx;
	}

	.cancel-after>view:nth-child(2) {
		color: #999;
		line-height: 50rpx;
		font-size: 26rpx;
	}

	.cancel-after>image {
		width: 290rpx;
		height: 290rpx;
		margin: 20rpx 0;
	}

	.cancel-after .save_btn {
		width: 284rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		border-radius: 8rpx;
		/* background: #3080e8; */
		color: #fff;
		font-size: 26rpx;
	}

	/* 更新于2019.5.10  增加联票逻辑 */

	.ticket_many_price {
		padding: 20rpx;
		display: flex;
		align-items: flex-end;
		flex-direction: column;
	}

	.ticket_many_price .heli {
		width: 100%;
		border-top: solid 1rpx #f2f2f2;
		margin-bottom: 19rpx;
	}

	.ticket_many_price text {
		font-size: 28rpx;
		color: #333;
	}

	.ticket_many_price text:nth-child(2) {
		font-size: 28rpx;
		color: #333;
		line-height: 32rpx;
		display: block;
		text-align: left;
		width: 100%;
	}

	.ticket_many_price text:nth-child(3) {
		margin-top: 10rpx;
		font-weight: bold;
	}

	.ticket_many_price text:nth-child(4) {
		font-weight: bold;
	}

	.ticket-many-info {
		width: 100%;
		display: flex;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.ticket-many-info .left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.ticket-many-info .left text {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.ticket-many-info .swiper-container-cont {
		flex: 1;
		width: 620rpx;
		height: 330rpx;
		overflow: hidden;
	}

	/*  */

	.swiper-container {
		display: flex;
	}

	.swiper-container>view {
		width: 440rpx;
		height: 330rpx;
		margin-right: 18rpx;
		border-radius: 10rpx;
	}

	.swiper-container>view image {
		width: 440rpx;
		height: 280rpx;
		border-radius: 8rpx;
	}

	.swiper-container>view text {
		color: #666;
		font-size: 26rpx;
	}

	/*  */

	.shop-status {
		width: 100%;
		overflow: hidden;
		border-radius: 8rpx;
		margin-top: 20rpx;
		background: #fff;
	}

	.shop-status .titaa {
		height: 80rpx;
		border-bottom: solid 1rpx #f2f2f2;
		line-height: 80rpx;
		padding: 0 20rpx;
		color: #333;
	}

	.status-item {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: dashed 1rpx #f2f2f2;
	}

	.status-item>view:nth-child(1) {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.status-item>view:nth-child(1) text:nth-child(1) {
		font-size: 26rpx;
		color: #333;
	}

	.status-item>view:nth-child(1) text:nth-child(2) {
		font-size: 24rpx;
		color: #999;
	}

	.status-item>view:nth-child(2) {
		color: #d4362a;
	}
</style>
